﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="jquery-1.4.1.js" type="text/javascript"></script>
    <link href="zebra_dialog.css" rel="stylesheet" type="text/css" />
    <script src="zebra_dialog.js" type="text/javascript"></script>
    <script type="text/javascript">
        //默认弹出框
        function Default() {
            $.Zebra_Dialog('<strong>Zebra_Dialog</strong>, a small, compact and highly configurable dialog box plugin for jQuery');
        }
        //错误弹出框
        function Error() {
            // this example is for the "error" box only
            // for the other types the "type" property changes to "warning", "question", "information" and "confirmation"
            // and the text for the "title" property also changes
            $.Zebra_Dialog('<strong>Zebra_Dialog</strong>, a small, compact and highly configurable dialog box plugin for jQuery', {
                'type': 'error',
                'title': 'Error'
            });
        }
        //提醒弹出框
        function Warning() {
            $.Zebra_Dialog('<strong>Zebra_Dialog</strong>, a small, compact and highly configurable dialog box plugin for jQuery', {
                'type': 'warning',
                'title': 'warning'
            });
        }
        //问题弹出框，貌似没用，完全可以用下面的callback来取代
        function Question() {
            $.Zebra_Dialog('<strong>Zebra_Dialog</strong>, a small, compact and highly configurable dialog box plugin for jQuery', {
                'type': 'question',
                'title': 'question'
            });
        }
        //信息提示弹出框
        function Information() {
            $.Zebra_Dialog('<strong>Zebra_Dialog</strong>, a small, compact and highly configurable dialog box plugin for jQuery', {
                'type': 'information',
                'title': 'information'
            });
        }
        //正确信息确认弹出框
        function Confirmation() {
            $.Zebra_Dialog('<strong>Zebra_Dialog</strong>, a small, compact and highly configurable dialog box plugin for jQuery', {
                'type': 'confirmation',
                'title': 'confirmation'
            });
        }

        //选项选择，可以有'Yes', 'No', 'Help'
        function Callback() {
            $.Zebra_Dialog('<strong>Zebra_Dialog</strong>, a small, compact and highly configurable dialog box plugin for jQuery', {
                'type': 'question',
                'title': 'Custom buttons',
                'buttons': ['Yes', 'No', 'Help'],
                'onClose': function (caption) {
                    // alert((caption != '' ? '"' + caption + '"' : 'nothing') + ' was clicked');
                    if (caption == 'Yes') {
                        //do something for yes
                        alert("you choice button is yes");
                    }
                    else if (caption == "No") {
                        //do something for no
                        alert("you choice button is no");
                    }
                    else if (caption == "Help") {
                        //do something for help
                        alert("you choice button is help");
                    }
                }
            });
        }


        //设定弹出框的出现位置
        function Position() {
            $.Zebra_Dialog('<strong>Zebra_Dialog</strong>, a small, compact and highly configurable dialog box plugin for jQuery', {
                'title': 'Custom positioning',
                'position': ['right -0', 'top + 20']
            });
        }
        //设定位置和自动关闭的时间
        function AutoClose() {
            new $.Zebra_Dialog('<strong>Zebra_Dialog</strong>, a small, compact and highly configurable dialog box plugin for jQuery', {
                'buttons': false,
                'modal': false,
                // 'position': ['right - 20', 'top + 20'],
                'auto_close': 2000
            });
        }

        function CSSDialog() {
            new $.Zebra_Dialog('<strong>Zebra_Dialog</strong>, a small, compact and highly configurable dialog box plugin for jQuery', {
                'custom_class': 'myclass',
                'title': 'Customizing the appearance'
            });
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <br />
    <input type="button" onclick="Default()" value="Default" />
     <br /> <br />
    <input type="button" onclick="Error()" value="Error" />
     &nbsp; &nbsp; &nbsp; &nbsp;
    <input type="button" onclick="Warning()" value="Warning" />
      &nbsp; &nbsp; &nbsp; &nbsp;
    <input type="button" onclick="Question()" value="Question" />
       &nbsp; &nbsp; &nbsp; &nbsp;
    <input type="button" onclick="Information()" value="Information" />
     &nbsp; &nbsp; &nbsp; &nbsp;
    <input type="button" onclick="Confirmation()" value="Confirm" />
    <br /> <br />
    <input type="button" onclick="Callback ()" value="Callback " />
     <br /> <br />
    <input type="button" onclick="Position ()" value="Position " />
     <br /> <br />
    <input type="button" onclick="AutoClose ()" value="AutoClose " />
     <br /> <br />
    <input type="button" onclick="CSSDialog ()" value="CSSDialog " />
    </div>
    </form>
</body>
</html>
